<!--
 * @Description: 表格字段配置
-->
<template>
  <div class="dialog">
    <el-dialog
      :visible.sync="showDialog"
      title="自定义筛选字段"
      @close="cancel"
      top="0"
    >
      <div class="promt">最多支持10个筛选字段</div>
      <el-row class="title-box">
        <el-col :span="6" class="checkbx">是否启用</el-col>
        <el-col :span="12" class="field">支持筛选的字段</el-col>
        <el-col :span="6" class="icon">拖动调整顺序</el-col>
      </el-row>
      <draggable
        v-model="columnList"
        group="site"
        animation="300"
        class="contain"
        @end="end"
        @change="handleChange"
      >
        <div v-for="item,index in columnList" :key="index" class="items">
          <el-checkbox class="checkbx" v-model="item.show"></el-checkbox>
          <div class="field">{{ item.label }}</div>
          <div class="icon">
            <img src="@/assets/table_column_sort.png" />
          </div>
        </div>
      </draggable>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="savebtn" @click="save">保存</el-button>
        <el-button type="primary" class="savebtn" @click="reset">重置</el-button>
        <el-button class="cancelbtn" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import tableApi from "@/api/basic-info-manage/table-config";
import { cloneDeep } from "lodash";
export default {
  name: "TableColumn",
  components: { draggable },

  props: {
    loadSaveColumnWhenTableChange: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: false,
    },
    tableColumns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    allTableColumns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableColumnSum: {
      type: String,
      default: "",
    },
    pathsuffix: {
      type: Number,
    },
  },
  data() {
    return {
      showDialog: false,
      loading: false,
      columnList: [],
      isIndeterminate: false,
    };
  },
  watch: {
    show(v) {
      this.showDialog = v;
    },
  },
  mounted() {
    // console.log("tableColumn mounted", this.tableColumns);
  },
  methods: {
    handleChange(val) {},
    end() {},
    changeCheckBox() {},
    // 用于初始化的时候，获取保存的配置
    async loadSaveColumn() {
      //表头内容不变时，不需要重新获取数据
      if (this.columnList.length > 0 && !this.loadSaveColumnWhenTableChange)
        return;
      var key = "";
      if (this.tableColumnSum && this.loadSaveColumnWhenTableChange)
        key = "_" + this.tableColumnSum;
      const url = this.$route.path + key;

      console.log("tablecolume loadSaveTableColumns ", this.allTableColumns);
      this.columnList = cloneDeep(this.allTableColumns);
      console.log("tablecolume loadSaveTableColumns url", url);
      tableApi.queryByUrlAndAccountAndOrganizationNo(url).then((res) => {
        const fieldContentStr = res.data?.fieldContentStr;
        const fieldContent = fieldContentStr && JSON.parse(fieldContentStr);
        if (Array.isArray(fieldContent) && fieldContent.length > 0) {
          console.log("loadSaveTableColumns data", fieldContent);
          let tableColumn = [];
          //// 防止重复新增字段
          fieldContent.forEach((el) => {
            let item = this.allTableColumns.find((ele) => {
              return ele.label === el.label;
            });
            if (item) tableColumn.push(el);
          });
          if (tableColumn.length > 0) this.columnList = tableColumn;
          console.log("tablecolume loadSaveColumn columnList", this.columnList);
        }
      });
    },

    save() {
      // if (['/production-batch-query', '/create-production-batch'].includes(path)) {
      //   path = path + this.pathsuffix
      // }
      var key = "";
      if (this.tableColumnSum && this.loadSaveColumnWhenTableChange)
        key = "_" + this.tableColumnSum;
      const url = this.$route.path + key;
      console.log("tablecolume save url", url);
      this.columnList.forEach((item) => {
        if (item.typeObj) {
          item.typeObj = {};
        }
      });
      tableApi
        .bind({
          url,
          account: sessionStorage.account,
          organizationNo: sessionStorage.organizationNo,
          fieldContentStr: JSON.stringify(this.columnList),
        })
        .then((res) => {
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.$emit("cancelColumn", true);
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    reset() {
      console.log("tableColumns allTableColumn", this.allTableColumns);
      this.columnList = cloneDeep(this.allTableColumns);
    },
    cancel() {
      this.$emit("cancelColumn");
    },
  },
};
</script>
<style scoped lang="scss">
.promt {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #3e3a39;
}
.title-box {
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #bfbfbf;
  font-family: Microsoft YaHei;
  font-weight: bold;
  border-bottom: none;
  color: #3e3a39;
  font-size: 14px;
  text-align: center;
  background: #ebeff6;

  .checkbx {
    flex: 1;
  }
  .field {
    flex: 2;
    border-left: 1px solid #bfbfbf;
    border-right: 1px solid #bfbfbf;
  }
  .icon {
    flex: 1;
    text-align: center;
  }
}
.contain {
  width: 100%;
  .items {
    display: flex;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #bfbfbf;
    border-top: none;
    &:first-child {
      border-top: 1px solid #bfbfbf;
    }
    .checkbx {
      flex: 1;
    }
    .field {
      flex: 2;
      color: #3e3a39;
      font-size: 14px;
      text-align: center;
      border-left: 1px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
    }
    .icon {
      flex: 1;
      text-align: center;
    }
  }
}
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__body {
  min-width: 160px !important;
}
</style>
